<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row class="live_wrapper clearfix">
                        <Button type="primary" style="float:right;width:90px;height: 34px;font-size: 14px;" @click="addAddress" v-if='0'>添加</Button>
                        <Input v-model="filter.phone" @on-search="search" search enter-button="查询" placeholder="请输入手机号"
                               style="width:290px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        <Input v-model="filter.name" @on-search="search" search enter-button="查询" placeholder="请输入姓名"
                                      style="width:290px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                    </Row>
                    <Row class="margin-top-10 table_pattern table_pattern2">
                        <Table :loading="loading" :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    import config from '@/config'
    import { userAddressList} from '@/api/main'
    export default {
        data() {
            return {
                pagenation: {},
                columns: [
                    {
                        key: 'name',
                        title: '姓名',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.name)
                        },
                    },
                    {
                        key: 'phone',
                        title: '手机号',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.phone)
                        },
                    },
                    {
                        key: 'address',
                        title: '收货地址',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.address)
                        },
                    },
                    {
                        key: 'default',
                        title: '是否默认地址',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', parseInt(params.row.default) ? '是' : '否')
                        },
                    },
                    {
                        key: 'created_time',
                        title: '创建时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.created_time)
                        },
                    },
                    /*{
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF'
                                      },
                                      on: {
                                          click: () => {
                                            this.editAddress(params.row)
                                          },
                                      },
                                  },
                                  '编辑',
                              )
                            ])
                        },
                    },*/
                ],
                edit: false,
                title: '添加地址',
                list: [],
                loading: true,
                saving: false,
                formValidate: {
                    id: 0,
                    name: '',
                    phone: '',
                    province: '',
                    city: '',
                    area: '',
                    defualt: 0
                },
                filter: {
                    page: 0,
                    name: '',
                    phonr: ''
                },
            }
        },
        methods: {
            change: function(page) {
                this.loading = true
                this.filter.page = page-1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            addAddress: function () {
              this.edit = true
              this.formValidate.id = 0
              this.title = '添加地址'
              this.handleReset('formValidate')
            },
            handleReset(name) {
                this.$refs[name].resetFields()
            },
            editAddress: function(obj){
                this.formValidate = Object.assign({}, obj)
                this.title = '编辑地址'
                this.edit = true
            },
            changeAddressStatus(obj) {
              changeAddressStatus(obj).then(res => {
                  if (res.code === 0) {
                    this.$Message.success('操作成功')
                    this.init()
                  } else {
                      this.$Message.error(res.text)
                  }
              })
            },
            handleSubmit() {
                if (this.formValidate.name == '') {
                    this.$Message.error("请输入姓名");return;
                }
                if (this.formValidate.phone == '') {
                    this.$Message.error("请输入手机号");return;
                }
                editAddress(this.formValidate).then(res => {
                    if (res.code === 0) {
                      this.$Message.success('操作成功')
                      this.edit = false
                      this.init()
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            },
            init () {
                userAddressList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.loading = false
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    }
                })
            }
        },
        mounted() {
            this.init();
        }
    }
</script>
